<template>
  <div class="navbar">
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <div class="inputSearch">
      <span>
        <van-icon name="search"/>
        <p>请输入搜索内容</p>
      </span>
    </div>
    <div class="photo">
      <img v-if="imgUrl" :src="imgUrl" alt="">
      <img v-else src="@/assets/default_photo.png" alt="">
      <van-button type="warning" size="small">下载APP</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  data () {
    return {
      imgUrl: ''
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户个人信息
    async getUserInfo () {
      const res = await this.$http.get('/user/' + window.sessionStorage.getItem('id'))
      console.log(res)
      if (res.status === 200) {
        this.imgUrl = res.data[0].user_img
      } else {
        this.$msg.fail('用户信息获取失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.navbar {
  height: 0.9375rem;
  background-color: white;
  display: flex;

  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;

    img {
      width: 75%;
    }
  }

  .inputSearch {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      background-color: #f4f4f4;
      width: 80%;
      height: 75%;
      border-radius: 0.521rem;
      display: flex;
      align-items: center;
      color: gray;

      .van-icon-search {
        font-size: 0.521rem;
        margin: 0 0.104rem;
      }

      p {
        font-size: 0.3125rem;
      }
    }
  }

  .photo {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 0.354rem;
    }

    .van-button--warning {
      background-color: pink;
      margin: 0 0.208rem;
      border: none;
    }
  }
}
</style>
